<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order border-rightbottom" id="older-list">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border style="width:100%">
              <el-table-column prop="goodsName" label="商品名称">

              </el-table-column>
              <el-table-column prop="count" label="数量" width="50">

              </el-table-column>
              <el-table-column prop="price" label="金额" width="70">

              </el-table-column>
              <el-table-column label="操作" width="100" flxed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingGood(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrederList(scope.row)">增加</el-button>
                </template>
              </el-table-column>                                          
            </el-table>
            <div class="totalDiv border-bottom">
              <small>数量：</small> {{totalCount}} &nbsp;&nbsp;&nbsp;&nbsp; <small>金额：</small> {{totalMany}}元
            </div>
            <div class="div-btn">
              <el-button type="warning">挂单</el-button>
              <el-button type="danger" @click="delAllGoods">删除</el-button>
              <el-button type="success" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>  
          <el-tab-pane label="挂单">
            挂单
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane> 
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="item of oftenGoods" :key="item.goodsId" @click="addOrederList(item)">
                <span>{{item.goodsName}}</span>
                <span class="o-price">{{item.price}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div>
                <ul class="cook-list" v-for="goods of type0Goods" :key="goods.goodsId">
                  <li class="food-list" @click="addOrederList(goods)">
                    <span class="food-img"><img :src="goods.goodsImg" alt=""></span>
                    <span class="food-name">{{goods.goodsName}}</span>
                    <span class="food-price">￥{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <div>
                <ul class="cook-list" v-for="goods of type1Goods" :key="goods.goodsId">
                  <li class="food-list" @click="addOrederList(goods)">
                    <span class="food-img"><img :src="goods.goodsImg" alt=""></span>
                    <span class="food-name">{{goods.goodsName}}</span>
                    <span class="food-price">￥{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div>
                <ul class="cook-list" v-for="goods of type2Goods" :key="goods.goodsId">
                  <li class="food-list" @click="addOrederList(goods)">
                    <span class="food-img"><img :src="goods.goodsImg" alt=""></span>
                    <span class="food-name">{{goods.goodsName}}</span>
                    <span class="food-price">￥{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div>
                <ul class="cook-list" v-for="goods of type3Goods" :key="goods.goodsId">
                  <li class="food-list" @click="addOrederList(goods)">
                    <span class="food-img"><img :src="goods.goodsImg" alt=""></span>
                    <span class="food-name">{{goods.goodsName}}</span>
                    <span class="food-price">￥{{goods.price}}</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>                                    
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Pos',
  data () {
    return {
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMany: 0,
      totalCount: 0
    }
  },
  created: function() {
    axios.get('http://jspang.com/DemoApi/oftenGoods.php')
      .then(response=>{
         this.oftenGoods=response.data
      })
      .catch(error=>{
          console.log(error)
          alert('网络错误，不能访问')
    })
    axios.get('http://jspang.com/DemoApi/typeGoods.php')
      .then(response=>{
         this.type0Goods=response.data[0];
         this.type1Goods=response.data[1];
         this.type2Goods=response.data[2];
         this.type3Goods=response.data[3];
 
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })      
  },
  mounted: () => {
    var orderHeight = document.body.clientHeight
    document.getElementById('older-list').style.height = orderHeight+'px'
  },
  methods: {
    addOrederList (goods) {
      this.totalMany = 0
      this.totalCount = 0
      //判断商品是否存在订单列表中
      let isHave = false
      for (let i = 0; i<this.tableData.length; i++){
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true
        }
      }
      //根据判断的值编写业务逻辑
      if (isHave) {
        //改变列表中商品的数量
        let arr = this.tableData.filter(a=>a.goodsId == goods.goodsId)
        arr[0].count++
      }else {
        let newGoods = {goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1}
        this.tableData.push(newGoods)
        console.log(newGoods)
      }

      //计算金额数量
      this.tableData.forEach((element) => {
        this.totalCount +=element.count
        this.totalMany = this.totalMany + (element.price * element.count)
      })
    },
    //删除单个商品
    delSingGood (goods) {
      this.tableData = this.tableData.filter(a => a.goodsId !=goods.goodsId)
      this.getAllMoney()
    },
    //全部删除
    delAllGoods () {
      this.tableData = []
      this.totalMany = 0
      this.totalCount = 0
    },
    //模拟结账
    checkout () {
      if (this.totalCount != 0) {
        this.tableData = []
        this.totalMany = 0
        this.totalCount = 0
        this.$message({
          message: '结账成功，感谢您又为店里出一份力。',
          type: 'success'
        })
      }else {
        this.$message.error('不能空结,老板了解你急切的心情！')
      }
    },
    //汇总金额数量
    getAllMoney () {
      this.totalMany = 0
      this.totalCount = 0
      if (this.tableData) {
        this.tableData.forEach((element) => {
          this.totalCount +=element.count
          this.totalMany = this.totalMany + (element.price * element.count)
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .pos
    text-align: center
  .older-list
    background-color #f9fafc
  .div-btn
    margin-top: 10px
  .totalDiv
    background-color: #fff
    padding: 10px
    text-align: center
  .title
    box-sizing: border-box
    height: 40px
    border-bottom: 1px solid #D3dce6
    background-color #f9fafc
    padding: 10px
    text-align: left 
  .often-goods-list
    ul
      li
        float: left
        border: 1px solid #f9fafc
        padding: 10px
        margin: 10px
        background-color #fff
        cursor: pointer        
  .o-price
    color: #5887FF
  .goods-type
    clear: both
  .cook-list 
    li
      list-style: none;
      width:23%
      border:1px solid #E5E9F2
      height: auot
      overflow: hidden
      background-color:#fff
      padding: 2px
      float:left
      margin: 10px 5px
      cursor: pointer
      span
        display: block
        float:left
      .food-img
        width: 40%
        img 
          width: 100%
      .food-name
        width: 60%
        box-sizing: border-box
        font-size: 18px
        color:brown
      .food-price
        font-size: 16px
        padding-left: 10px
        padding-top:15px
</style>

